<template>
    <div>
        <div class="content white-block">
            <div class="toolbar">
                <div class="provider">
                    <el-input v-model="input" placeholder="请输入IP地址" class="mr10 input"
                              @keyup.enter="getListData"></el-input>
                    <span class="state mr10" name="">状态</span>
                    <el-select v-model="value" placeholder="请选择" class="mr10">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <span class="state mr10" name="">应用类型</span>
                    <el-select v-model="value1" placeholder="请选择" class="mr10 select">
                        <el-option
                            v-for="item in options1"
                            :key="item.value1"
                            :label="item.label"
                            :value="item.value1">
                        </el-option>
                    </el-select>
                    <el-button type="primary" @click="handleCurrentChange(1)">查询</el-button>
                </div>
                <div class="text-right">
                    <el-button type="primary" @click="visibleNew=true">新建</el-button>
                </div>
            </div>
            <div class="table mt30">
                <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns" v-loading="loading"
                               class="mt20">
                    <template slot="operation" slot-scope="scope">
                        <el-link :underline="false" @click="modifyHandleClick(scope.row)" type="primary" size="small"
                                 class="mr10">编辑
                        </el-link>
                        <el-link :underline="false" @click="handleClick(scope.row)" type="primary" size="small">删除
                        </el-link>
                    </template>
                </table-example>
                <page :data="page" v-if="page" class="mt30 page" @jumpPage="handleCurrentChange"></page>
            </div>
        </div>
        <!--  新建系统弹框-->
        <dialog-msk :show.sync="visibleNew" ref="dialog" :center="true" :width="'7rem'" :title="'新建应用'"
                    @save="addSystem"
                    :noEsc="false"
                    :noModal="false"
                    @cancel="close">
            <div>
                <el-form label-width="1.5rem" ref="form" :model="form" :rules="newRules">
                    <el-form-item label="应用名" prop="appname">
                        <el-input v-model="form.appname" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="域名" prop="domainname">
                        <el-input v-model="form.domainname" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="IP地址" prop="ip">
                        <el-input v-model="form.ip" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="HTTP端口" prop="httpport">
                        <el-input v-model="form.httpport" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="SOCKET端口" prop="socketport">
                        <el-input v-model="form.socketport" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="应用类型">
                        <el-select v-model="form.apptype" placeholder="请选择">
                            <el-option
                                v-for="item in newOptions1"
                                :key="item.value1"
                                :label="item.label"
                                :value="item.value1">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="状态">
                        <el-select v-model="form.status" placeholder="请选择">
                            <el-option
                                v-for="item in newOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </dialog-msk>
        <dialog-msk :show.sync="visible" ref="dialog" :center="true" :width="'7rem'" :title="'编辑应用'" @save="updateSave"
                    :noEsc="false"
                    :noModal="false"
                    @cancel="close">
            <div>
                <el-form label-width="1.5rem" ref="form" :model="updateFrom" :rules="newRules">
                    <el-form-item label="应用名" prop="appname">
                        <el-input v-model="updateFrom.appname" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="域名" prop="domainname">
                        <el-input v-model="updateFrom.domainname" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="IP地址" prop="ip">
                        <el-input v-model="updateFrom.ip" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="HTTP端口" prop="httpport">
                        <el-input v-model="updateFrom.httpport" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="SOCKET端口" prop="socketport">
                        <el-input v-model="updateFrom.socketport" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="应用类型">
                        <el-select v-model="updateFrom.apptype" placeholder="请选择">
                            <el-option
                                v-for="item in newOptions1"
                                :key="item.value1"
                                :label="item.label"
                                :value="item.value1">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="状态">
                        <el-select v-model="updateFrom.status" placeholder="请选择">
                            <el-option
                                v-for="item in newOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </dialog-msk>

    </div>
</template>

<script>
    import dialogMsk from '../../components/dialog'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'

    export default {
        data() {
            let patter = /((1[0-9][0-9]\.)|(2[0-4][0-9]\.)|(25[0-5]\.)|([1-9][0-9]\.)|([0-9]\.)){3}((1[0-9][0-9])|(2[0-4][0-9])|(25[0-5])|([1-9][0-9])|([0-9]))/,
                ip = (rule, value, callback) => {
                    if (!patter.test(value)) {
                        return callback(new Error('请输入合法的ip'))
                    } else {
                        callback()
                    }
                }
            return {
                input: '',
                options: [
                    {
                        value: '2',
                        label: '全部'
                    }, {
                        value: '1',
                        label: '在用'
                    }, {
                        value: '0',
                        label: '不在用'
                    }
                ],
                value: '2',
                newOptions: [
                    {
                        value: '1',
                        label: '在用'
                    }, {
                        value: '0',
                        label: '不在用'
                    }
                ],
                options1: [
                    {
                        value1: '0',
                        label: '全部'
                    }, {
                        value1: '1',
                        label: '服务注册中心'
                    }, {
                        value1: '2',
                        label: '服务运行中心'
                    }, {
                        value1: '3',
                        label: '服务管理中心'
                    }, {
                        value1: '4',
                        label: '服务开发中心'
                    }, {
                        value1: '5',
                        label: '原子服务运行中心'
                    }
                ],
                value1: '0',
                newOptions1: [
                    {
                        value1: '1',
                        label: '服务注册中心'
                    }, {
                        value1: '2',
                        label: '服务运行中心'
                    }, {
                        value1: '3',
                        label: '服务管理中心'
                    }, {
                        value1: '4',
                        label: '服务开发中心'
                    }, {
                        value1: '5',
                        label: '原子服务运行中心'
                    }
                ],
                currentPage: 1,
                tableData: [],
                multipleSelection: [],
                size: 10,
                total: 0,
                page: null,
                header: [
                    {
                        prop: 'appname',
                        label: '应用名',
                        minWidth: 60,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'domainname',
                        label: '域名',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'ip',
                        label: 'IP地址',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'httpport',
                        label: 'HTTP端口',
                        minWidth: 80,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'socketport',
                        label: 'SOCKET端口',
                        minWidth: 80,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'apptype',
                        label: '应用类型',
                        minWidth: 120,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'status',
                        label: '状态',
                        minWidth: 40,
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        minWidth: 150,
                        align: 'center',
                        headerAlign: 'center',
                        fixed: 'right'
                    }
                ],
                form: {
                    appname: '',
                    domainname: '',
                    ip: '',
                    httpport: '',
                    socketport: '',
                    status: '1',
                    apptype: '1'
                },
                updateFrom: {},
                newRules: {
                    appname: [{required: true, message: '请输入应用名', trigger: 'blur'}],
                    domainname: [{required: true, message: '请输入域名', trigger: 'blur'}],
                    ip: [
                        {required: true, message: '请输入IP地址', trigger: 'blur'},
                        {validator: ip}
                    ],
                    httpport: [{required: true, message: '请输入HTTP端口', trigger: 'blur'}],
                    socketport: [{required: true, message: '请输入SOCKET端口', trigger: 'blur'}]
                },
                slotColumns: ['operation'],
                visible: false,
                visibleNew: false,
                modifyId: '',
                loading: false
            }
        },
        created() {
            this.getListData()
            let lett = this
            document.onkeydown = function (e) {
                let key = window.event.keyCode
                if (key === 13) {
                    lett.getListData()
                }
            }
        },
        methods: {
            // 获取数据列表数据
            getListData() {
                this.loading = true
                this.$http.get('/esbApp/selectLikeMess', {
                    apptype: this.value1,
                    current: this.currentPage,
                    ip: this.input,
                    size: this.size,
                    status: this.value,
                    total: this.total
                }).then(result => {
                    if (result.success) {
                        this.loading = false
                        this.total = result.data.total
                        this.tableData = result.data.records
                        this.page = result.data
                        // 根据数据判断应用类型
                        for (let i = 0; i < this.tableData.length; i++) {
                            if (this.tableData[i].apptype === '0') {
                                this.tableData[i].apptype = '全部'
                            } else if (this.tableData[i].apptype === '1') {
                                this.tableData[i].apptype = '服务注册中心'
                            } else if (this.tableData[i].apptype === '2') {
                                this.tableData[i].apptype = '服务运行中心'
                            } else if (this.tableData[i].apptype === '3') {
                                this.tableData[i].apptype = '服务管理中心'
                            } else if (this.tableData[i].apptype === '4') {
                                this.tableData[i].apptype = '服务开发中心'
                            } else if (this.tableData[i].apptype === '5') {
                                this.tableData[i].apptype = '原子服务运行中心'
                            }
                        }
                        // 根据数据判断状态
                        for (let i = 0; i < this.tableData.length; i++) {
                            if (this.tableData[i].status === '2') {
                                this.tableData[i].status = '全部'
                            } else if (this.tableData[i].status === '1') {
                                this.tableData[i].status = '在用'
                            } else if (this.tableData[i].status === '0') {
                                this.tableData[i].status = '不在用'
                            }
                        }
                    }
                })
            },
            // 修改按钮
            modifyHandleClick(row) {
                this.modifyId = row.id
                this.$http.get('/esbApp/selectOneMess', {
                    id: row.id
                }).then(result => {
                    this.updateFrom = result.data
                    this.visible = true
                })
            },
            updateSave() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.$http.get('/esbApp/saveInterface', {
                            id: this.modifyId,
                            appname: this.updateFrom.appname,
                            domainname: this.updateFrom.domainname,
                            ip: this.updateFrom.ip,
                            httpport: this.updateFrom.httpport,
                            socketport: this.updateFrom.socketport,
                            apptype: this.updateFrom.apptype,
                            status: this.updateFrom.status
                        }).then(result => {
                            if (result.success) {
                                this.$message({
                                    type: 'success',
                                    message: '编辑成功!'
                                })
                                this.visible = false
                                this.getListData()
                            }
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '编辑失败!'
                            })
                        })
                    }
                })
            },
            // 删除按钮
            handleClick(row) {
                this.$confirm('确定要删除该目录吗？', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get('/esbApp/delete', {
                        id: row.id,
                        status: row.status === '在用' ? '1' : '0'
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.getListData()
                        }
                    })
                    this.currentPage = '1'
                    this.getListData()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.getListData()
            },

            // 新建系统
            addSystem() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.$http.get('/esbApp/saveInterface', {
                            id: this.modifyId,
                            appname: this.form.appname,
                            domainname: this.form.domainname,
                            ip: this.form.ip,
                            httpport: this.form.httpport,
                            socketport: this.form.socketport,
                            apptype: this.form.apptype,
                            status: this.form.status
                        }).then(result => {
                            if (result.success) {
                                this.$message({
                                    type: 'success',
                                    message: '新建成功!'
                                })
                                this.visibleNew = false
                                this.getListData()
                            }
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '新建失败!'
                            })
                        })
                    }
                })
            },
            close() {
                this.visible = false
                this.visibleNew = false
                if (this.$refs.form) this.$refs.form.resetFields()
                this.form = {
                    appname: '',
                    domainname: '',
                    ip: '',
                    httpport: '',
                    socketport: '',
                    status: '1',
                    apptype: '1'
                }
            }
        },
        components: {
            dialogMsk,
            tableExample,
            page
        }
    }
</script>

<style scoped lang="less">
    .toolbar {
        line-height: 0.4rem;
        font-size: 0.16rem;
    }
</style>
